<template>
	<div class="p-grid dashboard">
		<div class="p-col-12 p-md-6 p-lg-3">
			<div class="p-grid overview-box overview-box-1">
				<div class="overview-box-title">
					<i class="pi pi-inbox"></i>
					<span>未读邮件</span>
				</div>
				<div class="overview-box-count">150</div>
				<div class="overview-box-stats">相比昨天减少12</div>
			</div>
		</div>
		<div class="p-col-12 p-md-6 p-lg-3">
			<div class="p-grid overview-box overview-box-2">
				<div class="overview-box-title">
					<i class="pi pi-map-marker"></i>
					<span>办理登记手续</span>
				</div>
				<div class="overview-box-count">532</div>
				<div class="overview-box-stats">相比昨天增加46</div>
			</div>
		</div>
		<div class="p-col-12 p-md-6 p-lg-3">
			<div class="p-grid overview-box overview-box-3">
				<div class="overview-box-title">
					<i class="pi pi-folder"></i>
					<span>档案</span>
				</div>
				<div class="overview-box-count">450</div>
				<div class="overview-box-stats">相比昨天增加30</div>
			</div>
		</div>
		<div class="p-col-12 p-md-6 p-lg-3">
			<div class="p-grid overview-box overview-box-4">
				<div class="overview-box-title">
					<i class="pi pi-user"></i>
					<span>用户</span>
				</div>
				<div class="overview-box-count">532</div>
				<div class="overview-box-stats">相比昨天增加350</div>
			</div>
		</div>

		<div class="p-col-12 p-lg-6 global-sales">
			<div class="card">
                <h5>全球销量</h5>
				<table>
					<thead>
					<tr>
						<th></th>
						<th></th>
						<th></th>
						<th>总销售</th>
						<th>趋势</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>1</td>
						<td><img alt="Brazil Flag" src="assets/layout/images/dashboard/flag-brazil.png" width="45" /></td>
						<td>巴西</td>
						<td>4234</td>
						<td>+35%</td>
					</tr>
					<tr>
						<td>2</td>
						<td><img alt="China Flag" src="assets/layout/images/dashboard/flag-china.png" width="45" /></td>
						<td>中国</td>
						<td>3214</td>
						<td>-25%</td>
					</tr>
					<tr>
						<td>3</td>
						<td><img alt="Belgium Flag" src="assets/layout/images/dashboard/flag-belgium.png" width="45" /></td>
						<td>比利时</td>
						<td>2842</td>
						<td>+28%</td>
					</tr>
					<tr>
						<td>4</td>
						<td><img alt="France Flag" src="assets/layout/images/dashboard/flag-france.png" width="45" /></td>
						<td>法国</td>
						<td>1942</td>
						<td>+15%</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="p-col-12 p-lg-6 product-statistics">
			<div class="card">
                <h5>产品统计</h5>
				<table>
					<tbody>
					<tr>
						<td class="col-overview col-wait">
							<div>W</div>
						</td>
						<td class="col-status">
							<span class="status-time">最近更新: 12小时前</span>
							<span class="status-text">等待中</span>
						</td>
						<td class="col-numbers">
							<div>253 <span>发货</span></div>
							<div>584 <span>订单</span></div>
						</td>
					</tr>
					<tr>
						<td class="col-overview col-success">
							<div>S</div>
						</td>
						<td class="col-status">
							<span class="status-time">最近更新: 12小时前</span>
							<span class="status-text">成功完成</span>
						</td>
						<td class="col-numbers">
							<div>312 <span>发货</span></div>
							<div>409 <span>订单</span></div>
						</td>
					</tr>
					<tr>
						<td class="col-overview col-delay">
							<div>D</div>
						</td>
						<td class="col-status">
							<span class="status-time">最近更新: 6小时前</span>
							<span class="status-text">延迟</span>
						</td>
						<td class="col-numbers">
							<div>122 <span>发货</span></div>
							<div>341 <span>订单</span></div>
						</td>
					</tr>
					<tr>
						<td class="col-overview col-preorder">
							<div>P</div>
						</td>
						<td class="col-status">
							<span class="status-time">最近更新: 15小时前</span>
							<span class="status-text">预定</span>
						</td>
						<td class="col-numbers">
							<div>221 <span>发货</span></div>
							<div>332 <span>订单</span></div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="p-col-12 p-lg-4">
            <div class="graph">
                <div class="p-grid">
                    <div class="p-col-4">
                        <span class="graph-title">访客数</span>
                        <span class="graph-value">52003</span>
                        <span class="graph-change">+32</span>
                    </div>
                    <div class="p-col-8">
                        <img alt="Chart 1" src="assets/layout/images/dashboard/graph-1.svg" />
                    </div>
                </div>
            </div>
        </div>
        <div class="p-col-12 p-lg-4">
            <div class="graph">
                <div class="p-grid">
                    <div class="p-col-4">
                        <span class="graph-title">注册数</span>
                        <span class="graph-value">532</span>
                        <span class="graph-change">+24792</span>
                    </div>
                    <div class="p-col-8">
                        <img alt="Chart 2" src="assets/layout/images/dashboard/graph-2.svg" />
                    </div>
                </div>
            </div>
        </div>
        <div class="p-col-12 p-lg-4">
            <div class="graph">
                <div class="p-grid">
                    <div class="p-col-4">
                        <span class="graph-title">销售额</span>
                        <span class="graph-value">￥5521</span>
                        <span class="graph-change">+243</span>
                    </div>
                    <div class="p-col-8">
                        <img alt="Chart 3" src="assets/layout/images/dashboard/graph-3.svg" />
                    </div>
                </div>
            </div>
        </div>

		<div class="p-col-12 p-md-6 p-lg-4 task-list">
			<div class="card">
                <h5>任务</h5>
                <ul>
                    <li>
                        <Checkbox name="task" value="reports" v-model="tasksCheckbox"/>
                        <span class="task-name">销售报告</span>
                        <i class="pi pi-briefcase"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="pay" v-model="tasksCheckbox"/>
                        <span class="task-name">支付发票</span>
                        <i class="pi pi-file"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="dinner" v-model="tasksCheckbox"/>
                        <span class="task-name">与客户吃饭</span>
                        <i class="pi pi-comments"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="meeting" v-model="tasksCheckbox"/>
                        <span class="task-name">开会</span>
                        <i class="pi pi-users"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="theme" v-model="tasksCheckbox"/>
                        <span class="task-name">新主题</span>
                        <i class="pi pi-palette"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="ticket" v-model="tasksCheckbox"/>
                        <span class="task-name">发机票</span>
                        <i class="pi pi-ticket"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="charts" v-model="tasksCheckbox"/>
                        <span class="task-name">生成图表</span>
                        <i class="pi pi-chart-bar"></i>
                    </li>
                    <li>
                        <Checkbox name="task" value="client" v-model="tasksCheckbox"/>
                        <span class="task-name">致电客户</span>
                        <i class="pi pi-mobile"></i>
                    </li>
                </ul>
			</div>
		</div>

		<div class="p-col-12 p-md-6 p-lg-4 p-fluid contact-form">
			<div class="card">
                <h5>联系我们</h5>
				<div class="p-grid">
					<div class="p-col-12">
						<Dropdown v-model="dropdownCity" :options="dropdownCities" optionLabel="name" placeholder="选择一个城市" />
					</div>
					<div class="p-col-12">
						<InputText type="text" placeholder="姓名" />
					</div>
					<div class="p-col-12">
						<InputText type="text" placeholder="年龄" />
					</div>
					<div class="p-col-12">
						<InputText type="text" placeholder="电话" />
					</div>
					<div class="p-col-12">
						<Button type="button" label="Send" icon="pi pi-check"/>
					</div>
				</div>
			</div>
		</div>

		<div class="p-col-12 p-lg-4 contacts">
			<div class="card">
                <h5>团队</h5>
                <ul>
                    <li class="clearfix">
                        <img alt="User" src="assets/layout/images/avatar.png" width="45" />
                        <div class="contact-info">
                            <span class="name">麦迪逊·休斯（我）</span>
                            <span class="location">jane@pn-manhattan.com</span>
                        </div>
                        <div class="contact-actions">
                            <span class="connection-status online">在线</span>
                            <i class="pi pi-fw pi-comment"></i>
                            <i class="pi pi-fw pi-reply"></i>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img alt="Contact 1" src="assets/layout/images/avatar1.png" width="45" />
                        <div class="contact-info">
                            <span class="name">约书亚·威廉姆斯</span>
                            <span class="location">joshua@pn-manhattan.com</span>
                        </div>
                        <div class="contact-actions">
                            <span class="connection-status online">在线</span>
                            <i class="pi pi-fw pi-comment"></i>
                            <i class="pi pi-fw pi-reply"></i>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img alt="Contact 2" src="assets/layout/images/avatar2.png" width="45" />
                        <div class="contact-info">
                            <span class="name">艾米丽·克拉克</span>
                            <span class="location">emily@pn-manhattan.com</span>
                        </div>
                        <div class="contact-actions">
                            <span class="connection-status offline">离线</span>
                            <i class="pi pi-fw pi-comment"></i>
                            <i class="pi pi-fw pi-reply"></i>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img alt="Contact 3" src="assets/layout/images/avatar3.png" width="45" />
                        <div class="contact-info">
                            <span class="name">蒂姆·约翰逊</span>
                            <span class="location">tim@pn-manhattan.com</span>
                        </div>
                        <div class="contact-actions">
                            <span class="connection-status online">在线</span>
                            <i class="pi pi-fw pi-comment"></i>
                            <i class="pi pi-fw pi-reply"></i>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img alt="Contact 4" src="assets/layout/images/avatar4.png" width="45" />
                        <div class="contact-info">
                            <span class="name">大卫·斯塔克</span>
                            <span class="location">kelly@pn-manhattan.com</span>
                        </div>
                        <div class="contact-actions">
                            <span class="connection-status offline">离线</span>
                            <i class="pi pi-fw pi-comment"></i>
                            <i class="pi pi-fw pi-reply"></i>
                        </div>
                    </li>
                </ul>
			</div>
		</div>
		<div class="p-col-12 p-lg-8 chat">
			<div class="card">
                <h5>聊天</h5>
				<ul>
					<li class="clearfix message-from">
						<img alt="Contact 2" src="assets/layout/images/avatar2.png" />
						<span>晚上一起吃饭吗？</span>
					</li>
					<li class="clearfix message-own">
						<img alt="User" src="assets/layout/images/avatar.png" />
						<span>可以，请问去哪里</span>
					</li>
					<li class="clearfix message-from">
						<img alt="Contact 2" src="assets/layout/images/avatar2.png" />
						<span>公司旁边的酒吧，我六点下班，然后我去接你？</span>
					</li>
					<li class="clearfix message-own">
						<img alt="User" src="assets/layout/images/avatar.png" />
						<span>我突然想起，我还有一些事情要处理，可以晚一点吗？</span>
					</li>
					<li class="clearfix message-own">
							<img alt="User" src="assets/layout/images/avatar.png" />
						<span>那八点钟如何？</span>
					</li>
					<li class="clearfix message-from">
						<img alt="Contact 2" src="assets/layout/images/avatar2.png" />
						<span>可以到时候见吧。</span>
					</li>
					<li class="clearfix message-own">
						<img alt="User" src="assets/layout/images/avatar.png" />
						<span>好的，到时候见。</span>
					</li>
				</ul>
				<div class="new-message">
					<div class="message-attachment">
						<i class="pi pi-paperclip"></i>
					</div>
					<div class="message-input">
						<input type="text" placeholder="发消息" class="p-inputtext" />
					</div>
				</div>
			</div>

			<div class="card">
                <h5>最近销售</h5>
				<DataTable :value="products" class="p-datatable-customers" :rows="5" style="margin-bottom: 20px" :paginator="true">
					<Column>
						<template #header>
							Logo
						</template>
						<template #body="slotProps">
							<img :src="'assets/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50px" />
						</template>
					</Column>
					<Column field="name" header="名称" sortable></Column>
					<Column field="category" header="类别" sortable></Column>
					<Column field="price" header="价格" sortable>
						<template #body="slotProps">
							{{formatCurrency(slotProps.data.price)}}
						</template>
					</Column>
					<Column>
						<template #header>
							操作
						</template>
						<template #body>
							<Button icon="pi pi-search" type="button" class="p-button-success p-mr-2 p-mb-1"></Button>
							<Button icon="pi pi-times" type="button" class="p-button-danger p-mb-1"></Button>
						</template>
					</Column>
				</DataTable>
			</div>
		</div>

		<div class="p-col-12 p-lg-4">
			<div class="card timeline p-fluid">
				<div class="p-grid">
					<div class="p-col-3">
						<span class="event-time">现在</span>
						<i class="pi pi-globe" style="color:#3984b8"></i>
					</div>
					<div class="p-col-9">
						<span class="event-owner" style="color:#3984b8">凯瑟琳·梅</span>
						<span class="event-text">Lorem ipsun dolor amet</span>
						<div class="event-content">
							<img alt="Bridge" src="assets/layout/images/dashboard/bridge.png" width="100"/>
						</div>
					</div>

					<div class="p-col-3">
						<span class="event-time">12小时前</span>
						<i class="pi pi-star-o" style="color:#f6ac2b"></i>
					</div>
					<div class="p-col-9">
						<span class="event-owner" style="color:#f6ac2b">布兰登·桑托斯</span>
						<span class="event-text">Ab nobis, magnam sunt eum. Laudantium, repudiandae, similique!.</span>
					</div>

					<div class="p-col-3">
						<span class="event-time">15小时前</span>
						<i class="pi pi-comment" style="color:#7e8dcd"></i>
					</div>
					<div class="p-col-9">
						<span class="event-owner" style="color:#7e8dcd">斯蒂芬·沃德</span>
						<span class="event-text">Omnis veniam quibusdam ratione est repellat qui nam quisquam ab mollitia dolores ullam voluptates, similique, dignissimos.</span>
						<div class="event-content">
							<img alt="Nature" src="assets/demo/images/nature/nature1.jpg" width="100"/>
						</div>
					</div>

					<div class="p-col-3">
						<span class="event-time">2天前</span>
						<i class="pi pi-map-marker" style="color:#e175a0"></i>
					</div>
					<div class="p-col-9">
						<span class="event-owner" style="color:#e175a0">杰森·史密斯</span>
						<span class="event-text">Laudantium, repudiandae, similique!</span>
						<div class="event-content">
							<img alt="Map" src="assets/layout/images/dashboard/map.png" />
						</div>
					</div>

					<div class="p-col-3">
						<span class="event-time">1周前</span>
						<i class="pi pi-heart" style="color:#39b8b6"></i>
					</div>
					<div class="p-col-9">
						<span class="event-owner">凯文·考克斯</span>
						<span class="event-text">Quibusdam ratione est repellat qui nam quisquam veniam quibusdam ratione.</span>
					</div>

					<div class="p-col-3">
						<span class="event-time">2周前</span>
						<i class="pi pi-compass" style="color:#3eb839"></i>
					</div>
					<div class="p-col-9">
						<span class="event-owner" style="color:#3eb839">沃特·怀特</span>
						<span class="event-text">I am the one who knocks!</span>
					</div>

					<div class="p-col-12">
						<Button type="button" label="刷新" icon="pi pi-refresh" class="rounded-btn raised-btn"></Button>
					</div>
				</div>
			</div>
		</div>

		<div class="p-col-12">
            <div class="card">
                <h5>日历</h5>
                <FullCalendar :events="events" :options="options" />
			</div>
		</div>
	</div>
</template>

<script>
import ProductService from '../api/ProductService';
import EventService from '../api/EventService';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

export default {
	data() {
		return {
			tasksCheckbox: [],
			dropdownCities: [
				{name: 'New York', code: 'NY'},
				{name: 'Rome', code: 'RM'},
				{name: 'London', code: 'LDN'},
				{name: 'Istanbul', code: 'IST'},
				{name: 'Paris', code: 'PRS'}
			],
			dropdownCity: null,
			products: null,
			selectedProducts: null,
			options: {
				plugins:[dayGridPlugin, timeGridPlugin, interactionPlugin],
				defaultDate: '2016-01-12',
				header: {
					left: 'prev,next',
					center: 'title',
					right: 'dayGridMonth,timeGridWeek,timeGridDay'
				},
				editable: true
			},
			events: null,
		}
	},
	productService: null,
	eventService: null,
	created() {
		this.productService = new ProductService();
		this.eventService = new EventService();
	},
	mounted() {
		this.productService.getProductsSmall().then(data => this.products = data);
		this.eventService.getEvents().then(data => this.events = data);
	},
	methods: {
		formatCurrency(value) {
			return value.toLocaleString('zh-CN', {style: 'currency', currency: 'USD'});
		}
	}
}
</script>

<style scoped>

</style>
